<template>
    <div class="query">
        <!-- 高级查询 -->
        <el-dialog title="高级查询" :visible.sync="dialogVisible" width="65%" :close-on-click-modal="false">
            <div>
                <table>
                    <tr>
                        <td>规则编号：</td>
                        <td>
                            <el-input 
                                v-model="indexClauseRelationParam.entryCode" 
                                placeholder="" 
                                size="mini" 
                                style="width:66%"
                            > </el-input>
                            <div style="float:right;border: 1px solid #dcdfe6;height:28px;line-height: 28px;padding: 0px 2px">
                                <el-checkbox v-model="indexClauseRelationParam.exactSelect" label="1">精准查询</el-checkbox>
                            </div>
                        </td>
                        <td>生效日期：</td>
                        <td>
                            <el-date-picker
                                v-model="startTime"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                size="mini"
                                style="width:100%"
                                value-format="yyyyMMdd"
                            >
                            </el-date-picker>
                        </td>
                    </tr>
                    <tr>
                        <td>规则说明：</td>
                        <td>
                            <el-input v-model="indexClauseRelationParam.entryName" placeholder="" size="mini"> </el-input>
                        </td>
                        <td>失效日期：</td>
                        <td>
                            <el-date-picker
                                v-model="endTime"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                size="mini"
                                style="width:100%"
                                value-format="yyyyMMdd"
                            >
                            </el-date-picker>
                        </td>
                    </tr>
                    <tr>
                        <!-- <td>条款来源：</td>
                        <td>
                            <el-select v-model="indexClauseRelationParam.clauseSource" placeholder="请选择" size="mini">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </td> -->
                        <td>规则类型：</td>
                        <td>
                            <el-select v-model="indexClauseRelationParam.entryTypes" multiple placeholder="" size="mini" clearable>
                                <el-option
                                    v-for="itme in EntryTypeList"
                                    :key="itme.dictKey"
                                    :value="itme.dictKey"
                                    :label="itme.dictKeyName"
                                ></el-option>
                            </el-select>
                        </td>
                        <td>作用范围：</td>
                        <td>
                            <el-select v-model="indexClauseRelationParam.riskCalTypes" multiple placeholder="" size="mini" clearable>
                                <el-option value="0" label="静态"></el-option>
                                <el-option value="1" label="指令"></el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td>产品代码：</td>
                        <td>
                            <el-select v-model="indexClauseRelationParam.fundCode" placeholder="" size="mini" clearable filterable>
                                <el-option v-for="itme in accountList" :key="itme.id" :value="itme.id" :label="itme.label"></el-option>
                            </el-select>
                        </td>
                        <td>启用状态：</td>
                        <td>
                            <el-select v-model="indexClauseRelationParam.entryStatus" multiple placeholder="" size="mini" clearable>
                                <el-option label="启用" value="1"></el-option>
                                <el-option label="停用" value="0"></el-option>
                            </el-select>
                        </td>
                    </tr>
                    <!-- <tr>
                        <td>规则来源：</td>
                        <td>
                            <el-select v-model="indexClauseRelationParam.entrySource" placeholder="请选择" size="mini">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </td>
                        <td>规则类型：</td>
                        <td>
                            <el-select v-model="indexClauseRelationParam.entryTypes" multiple placeholder="请选择" size="mini">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </td>
                    </tr> -->
                    <tr>
                        <td>规则组：</td>
                        <td>
                            <el-select v-model="indexClauseRelationParam.entryGroup" placeholder="" size="mini" style="width:66%" clearable filterable>
                                <el-option
                                    v-for="itme in entryGroupsList"
                                    :key="itme.dictKey"
                                    :value="itme.dictKey"
                                    :label="itme.dictKey + itme.dictKeyName"
                                ></el-option>
                            </el-select>
                            <div style="float:right;border: 1px solid #dcdfe6;height:28px;line-height: 28px;padding: 0px 2px">
                                <el-checkbox v-model="indexClauseRelationParam.excludeSelect" label="1">排除选中</el-checkbox>
                            </div>
                        </td>
                        <td>自定义分类：</td>
                        <td>
                            <el-select v-model="indexClauseRelationParam.customType" multiple placeholder="" size="mini" clearable>
                                <el-option
                                        v-for="itme in customTypesList"
                                        :key="itme.dictKey"
                                        :value="itme.dictKey"
                                        :label="itme.dictKeyName"
                                    ></el-option>
                            </el-select>
                        </td>
                    </tr>
                </table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button @click="confirmQuery('reset')">重 置</el-button>
                <el-button type="primary" @click="confirmQuery('comfirm')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator';
import { dateFormat } from '@/utils/tools';
import DictionConstUtil, { SGU_CACHE } from '@/utils/diction-const-util';
@Component({
    name: 'RuleQueryDialog',
    components: {},
})
export default class RuleQueryDialog extends Vue {
    @Prop() ruleQueryDialog;
    private dialogVisible: boolean = false;
    private queryList = {
        type: '',
    };
    startTime = '';
    endTime = '';
    EntryTypeList: any[] = [];
    customTypesList: any[] = [];
    entryGroupsList: any[] = [];
    accountList: any[] = [];
    indexClauseRelationParam = {
        clauseCode: '',
        entryCode: '', // 规则编号
        exactSelect: true, // 精准查询
        effectStartDate: '', // 生效开始日期
        effectEndDate: '', // 生效结束日期
        entryName: '', // 规则说明
        invalidStartDate: '', // 失效开始日期
        invalidEndDate: '', // 失效结束日期comfirmQuery
        clauseSource: '', // 条款来源
        riskCalTypes: [], // 作用范围
        fundCode: '', // 产品代码
        entryStatus: [], // 启用状态
        entrySource: '', // 规则来源
        entryTypes: [], // 规则类型
        entryGroup: '', // 规则组
        excludeSelect: true, // 排除选中
        customType: [], // 自定义分类
        entryNameOrCodeLike: '',
    }
    @Watch('ruleQueryDialog')
    async watchRuleQueryDialog(val) {
        this.dialogVisible = val;
        if (val == true) {
            // 风险类型
            this.EntryTypeList = DictionConstUtil.PojoToList(DictionConstUtil.EntryType);
            // 自定义风险
            this.customTypesList = (await DictionConstUtil.FNCustomType()) || [];
            // 条目组
            this.getGroupList();
            // 条目数据
            let fubds = await SGU_CACHE('FundInfoByUser', '/fundInfo/list/byUser/like', []);
            let local = [];
            for (let itme of fubds) {
                let datas = itme.fundCode + '-' + itme.fundName;
                local.push({ label: datas, id: itme.fundCode });
            }
            // 基金账户
            this.accountList = local;
        } else {
            this.indexClauseRelationParam = {
                clauseCode: '',
                entryCode: '', // 规则编号
                exactSelect: true, // 精准查询
                effectStartDate: '', // 生效开始日期
                effectEndDate: '', // 生效结束日期
                entryName: '', // 规则说明
                invalidStartDate: '', // 失效开始日期
                invalidEndDate: '', // 失效结束日期comfirmQuery
                clauseSource: '', // 条款来源
                riskCalTypes: [], // 作用范围
                fundCode: '', // 产品代码
                entryStatus: [], // 启用状态
                entrySource: '', // 规则来源
                entryTypes: [], // 规则类型
                entryGroup: '', // 规则组
                excludeSelect: true, // 排除选中
                customType: [], // 自定义分类
                entryNameOrCodeLike: '',
            }
        }
    }
    @Watch('dialogVisible')
    watchDialogVisible(val) {
        if (val == false) {
            this.$emit('emitRuleQuery', val)
        }
    }
    // 获取条目组
    getGroupList() {
        this.$axios.get('/entry/group/list').then((res: any) => {
            this.entryGroupsList = [];
            res = res || [];
            for (let i = 0; i < res.length; i++) {
                this.entryGroupsList.push({ dictKey: res[i].groupCode, dictKeyName: res[i].groupName });
            }
        });
    }
    confirmQuery(param) {
        if (param == 'comfirm') {
            this.indexClauseRelationParam.effectStartDate = this.startTime[0];
            this.indexClauseRelationParam.effectEndDate = this.startTime[1];
            this.indexClauseRelationParam.invalidStartDate = this.endTime[0];
            this.indexClauseRelationParam.invalidEndDate = this.endTime[1];
            this.$emit('emitConfirmQuery', this.indexClauseRelationParam);    
        } else if (param == 'reset') {
            this.indexClauseRelationParam = {
                clauseCode: '',
                entryCode: '', // 规则编号
                exactSelect: true, // 精准查询
                effectStartDate: '', // 生效开始日期
                effectEndDate: '', // 生效结束日期
                entryName: '', // 规则说明
                invalidStartDate: '', // 失效开始日期
                invalidEndDate: '', // 失效结束日期comfirmQuery
                clauseSource: '', // 条款来源
                riskCalTypes: [], // 作用范围
                fundCode: '', // 产品代码
                entryStatus: [], // 启用状态
                entrySource: '', // 规则来源
                entryTypes: [], // 规则类型
                entryGroup: '', // 规则组
                excludeSelect: true, // 排除选中
                customType: [], // 自定义分类
                entryNameOrCodeLike: '',
            }
            this.startTime = '';
            this.endTime = '';
        }
    }
}
</script>
<style lang="scss" scoped>
.query {
    // height: calc(98vh - 7px);
    background: #ffffff;
}
table {
    border-spacing: 10px;
    tr {
        td:nth-child(1),td:nth-child(3) {
            text-align: right;
            width: 90px;
        }
        td:nth-child(2) {
            .el-input {
                width: 100%;
            }
            .el-select {
                width: 100%;
            }
        }
        td:nth-child(4) {
            .el-select {
                width: 100%;
            }
        }
    }
}
</style>
